<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>基站坐标配置</title>
    <meta name="keywords" content="基站坐标配置" />
    <meta name="description" content="基站坐标配置" />
    <link rel="shortcut icon" type="image/ico" href="/esmap/image/favicon.ico">
    <link href="/esmap/css/common.css" rel="stylesheet">
    <style type="text/css">
        .addmarker-floor.btn-floor-vertical {
            position: absolute;
            left: 2%;
            bottom: 5%;
        }

        .modelInfo {
            position: absolute;
            right: 10px;
            bottom: 100px;
            z-index: 999;
        }

        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        }

        .panel-default>.panel-heading {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
        }

        .panel-heading {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        button {
            padding: 7px 11px;
            background-color: #fff;
            border: none;
            cursor: pointer;
            border-radius: 3px;
        }
    </style>

</head>

<body>
<div id="map-container"></div>
<div class="loading">
    <div class="lodingImg"></div>
</div>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <h1><a  title="基站坐标配置" target="_blank">基站坐标配置</a> </h1>

        <div class="tips-right">
            <span class="tip1"></span>
            <span class="tip2"></span>
        </div>
        <div class="tips-msg" style="display: none">
            <div class="msg msg1">
                <div class="erweima"></div>
                <p>手机扫一扫进入体验</p>
            </div>
            <div class="msg msg2">
                <h4>添加标注示例</h4>
                <p>1. 文本标注 new esmap.ESTextMarker({...})</p>
                <p>2. 图片标注 new esmap.ESImageMarker({...})</p>
                <p>3. 定位标注 new esmap.ESLocationMarker({...})</p>

                <div style="display: none">室内地图添加标注示例,易景室内三维地图引擎提供地图浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内地图显示风格及样式，可自动绘制楼层热力图、散点图等专题地图，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的地图主题资源供二次开发调用。</div>
            </div>
        </div>
    </div>
</nav>
<input type="text" id="locatorX" name="locatorX" style="display: none"/>
<input type="text" id="locatorY" name="locatorY" style="display: none"/>
<input type="text" id="toCoordinateX" name="toCoordinateX" style="display: none"/>
<input type="text" id="toCoordinateY" name="toCoordinateY" style="display: none"/>
<input type="text" id="fnumber" name="fnumber" style="display: none"/>
<div class="viewmode-floor btn-floor-vertical" data-toggle="buttons" style="display: none">
    <button id="btn2D" class="btn btn-default">2D</button>
    <button id="btn3D" class="btn btn-default">3D</button>
</div>

<div class="addmarker-floor btn-floor-vertical" data-toggle="buttons">
    <button id="btn1" class="btn btn-default leftbtn" style="display: none">添加纯文本标注</button>
    <button id="btn9" class="btn btn-default leftbtn" style="display: none">更新文本标注内容</button>
    <button id="btn7" class="btn btn-default leftbtn" style="display: none">添加图片加文字标注</button>
    <button id="btn2" class="btn btn-default leftbtn" style="display: none">添加普通图片标注</button>
    <button id="btn8" class="btn btn-default leftbtn" style="display: none">添加带角度的图片标注</button>
    <button id="btn3" class="btn btn-default leftbtn" style="display: none">添加定位标注</button>
    <button id="btn4" class="btn btn-default leftbtn" style="display: none">更新定位标注</button>
    <button id="btn5" class="btn btn-default leftbtn" >设置基站位置</button>
    <button id="btn10" class="btn btn-default leftbtn" >设置基站方向位置</button>
    <button id="btn6" class="btn btn-default leftbtn">清除标注</button>
</div>

<div class="panel panel-default modelInfo">
    <!-- Default panel contents -->
    <div class="panel-heading">地图坐标</div>

    <!-- Table -->
    <table class="table table-striped">
        <thead>
        <tr>
            <th>X:</th>
            <td>0</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>Y:</th>
            <td>0</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="wrapper wrapper-content animated fadeInRight ibox-content" style="display: none">
    <form class="form-horizontal m" id="form-locator-edit" th:object="${sysLocator}">
        <input name="id" id="id" th:field="*{id}" type="hidden">
        <input name="toCoordinate" th:field="*{toCoordinate}" class="form-control" type="text">
        <input name="coordinate" th:field="*{coordinate}" class="form-control" type="text">
        <input name="fnum" th:field="*{fnum}" class="form-control" type="text">
    </form>
</div>

<th:block th:include="include :: footer" />
<script src="/esmap/lib/config.js"></script>
<script src="/esmap/lib/esmap-1.6.min.js"></script>
<!--<script src="/esmap/lib/jquery-2.1.4.min.js"></script>-->
<script src="/esmap/lib/jquery.qrcode.min.js"></script>
<script src="/esmap/lib/tips_controls.js"></script>
<script type="text/javascript">
    //定义全局map变量3
    var map;
    var esmapID = getQueryString('id') || defaultOpt.mapID;
    var styleid = getQueryString("styleid") || defaultOpt.themeID;
    var lm;
    var im;
    var center;
    var floorLayer;
    var locatorMakerIm;
    var mapCoord;
    var isDynamicMarker = false;
    var isLocator = false;
    var tm;
    var im3;
    var tm2;
    var esmapID= '[[${sysEsmap.mapId}]]';
    var token= '[[${sysEsmap.token}]]';
    var mapDataUrl= '';
    var styleid= [[${sysEsmap.themeId}]];

    // //实线
    // var lineStyle1 = {
    //     lineWidth: 0.3,
    //     alpha: 0.8,
    //     offsetHeight: 3,
    //     lineType: esmap.ESLineType.FULL
    // }
    //普通箭头线
    var lineStyle2 = {
        color: "#00ff00",
        lineWidth: 0.5,
        alpha: 0.8,
        offsetHeight: 3,
        lineType: esmap.ESLineType.ARROW,
        seeThrough:true
    }

    window.onload = function () {
        //楼层控制控件配置参数
        var ctlOpt = new esmap.ESControlOptions({
            position: esmap.ESControlPositon.RIGHT_TOP
            , imgURL: "/esmap/image/wedgets/"
        });
        var floorControl;
        var container = document.getElementById('map-container');
        map = new esmap.ESMap({
            container: container,
            mapDataSrc: mapDataUrl,
            mapThemeSrc: defaultOpt.mapThemeUrl,
            themeID: styleid,
            focusAlphaMode: false,
            mapAudioSrc: '/esmap/lib',
            token:token,
            defaultFloornum: 1,
            viewMode: esmap.ESViewMode.MODE_2D
        });
        map.openMapById(esmapID); //sceneId
        map.showCompass = true;
        map.on('loadComplete', function () {
            //创建楼层控件
            floorControl = new esmap.ESButtonFloorsControl(map, ctlOpt);
        });

        map.on('loadComplete', function () {
            var loading = document.getElementsByClassName("loading");
            loading[0].style.display = "none";
            floorLayer = map.getFloor(1);
            floorLayer2 = map.getFloor(1);
            center = map.center;
        });
        map.on("mapClickNode", function (e) {
            mapCoord = e.hitCoord || null;
        })
        //为模型填充div添加点击事件
        container.onclick = bindClick;
        container.ontouchend = bindClick;
        show = function (fid, coord) {
            var fnum = map.focusFloorNum;
            if (coord != null) {
                var imgurl  = "";
                if (isLocator){
                    var re = floorLayer.removeLayersByTypes([esmap.ESLayerType.TEXT_MARKER, esmap.ESLayerType.IMAGE_MARKER]);
                    layer = new esmap.ESLayer('imageMarker');
                    floorLayer = map.getFloor(fnum); // 所在楼层
                    // var layer = floorLayer.getOrCreateLayerByName('dynamic', 'imageMarker');
                    imgurl = '/esmap/image/locator1.png';
                    var im = new esmap.ESImageMarker({
                        x: coord.x,
                        y: coord.y,
                        fnum:fnum,
                        url: imgurl,
                        spritify: true, //跟随地图缩放变化大小，默认为true，可选参数
                        height: 3,
                        size: 64,
                        seeThrough:false
                    });
                    layer.addMarker(im);
                    floorLayer.addLayer(layer);
                    $("#locatorX").val(coord.x);
                    $("#locatorY").val(coord.y);
                    $("#fnumber").val(fnum);
                }else{
                    // lm && map.removeLocationMarker(lm);
                    // imgurl = '/esmap/image/to_coordinate.png';
                    // lm = new esmap.ESLocationMarker({
                    //     url: imgurl,
                    //     size: 64,
                    //     height: 3,
                    //     seeThrough:false
                    // });
                    // map.addLocationMarker(lm);
                    //
                    // lm.setPosition({
                    //     x: coord.x,
                    //     y: coord.y,
                    //     fnum: fnum,
                    //     height: 0
                    // })

                    //清除文字标注
                    var re = floorLayer.removeLayersByTypes([esmap.ESLayerType.TEXT_MARKER]);
                    var layer = new esmap.ESLayer('textMarker');
                    layer.name = '方向坐标'
                    //添加文本标注，默认样式
                    var gpos = floorLayer.mapCoord;
                    tm = new esmap.ESTextMarker({
                        x: coord.x,
                        y: coord.y,
                        height: 3,
                        name: "基站方向",
                        showLevel: 20,
                        // spritify: false, //是否跟随地图缩放默认为true
                        fillcolor: "255,0,0", //填充色
                        fontsize: "12.0", //字体大小
                        strokecolor: "255,255,0" //边框色
                    });
                    layer.addMarker(tm);
                    floorLayer.addLayer(layer);


                    $("#toCoordinateX").val(coord.x);
                    $("#toCoordinateY").val(coord.y);


                    //======================画线
                    //1.清除掉之前生成的线
                    map.clearAllLineMark()
                    //2.根据之前基站坐标和现在的方向坐标生成连线
                    var locatorX = $("#locatorX").val();
                    var locatorY = $("#locatorY").val();
                    var v1 = {
                        x: locatorX,
                        y: locatorY,
                        fnum: fnum,
                        offset: 0
                    }
                    var v2 = {
                        x: coord.x,
                        y: coord.y,
                        fnum: fnum,
                        offset: 0
                    }
                    //箭头导航线
                    var points = [v1, v2];
                    var linemark = new esmap.ESLineMarker(1, points, lineStyle2)
                    linemark.datas = {
                        case: 'ffff'
                    }
                    map.drawLineMark(linemark);
                    //计算两点之间距离
                    var m = getDistance(v1,v2);
                    log.log("计算两点之间距离:"+m);
                }


            }
        };
        function getDistance(p1, p2) {
            if (p1 == undefined || p2 == undefined) return;
            return Math.abs(Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)))
        }

        //清除功能
        var removeAll = function () {
            var re = floorLayer.removeLayersByTypes([esmap.ESLayerType.TEXT_MARKER, esmap.ESLayerType.IMAGE_MARKER]);
            lm && map.removeLocationMarker(lm);
            //1.清除掉之前生成的线
            map.clearAllLineMark();
        }
        //切换楼层清除之前的标注
        map.on('visibleFloorNumsChanged', function (e) {
            map.clearAllLineMark()
            console.log("第"+e+"层加载完毕")
        });
        // map.on('focusFloorNumChanged', function (e) {
        //     // removeAll();
        //     console.log("第"+e+"层加载完毕")
        // });
        //添加纯文字标注方法
        document.getElementById("btn1").onclick = function () {
            removeAll();
            var layer = new esmap.ESLayer('textMarker');
            layer.name = 'mylayer'
            //添加文本标注，默认样式
            var gpos = floorLayer.mapCoord;
            tm = new esmap.ESTextMarker({
                x: gpos.x - 25,
                y: gpos.y - 25,
                height: 3,
                name: "测试标签2",
                showLevel: 20,
                // spritify: false, //是否跟随地图缩放默认为true
                fillcolor: "255,0,0", //填充色
                fontsize: "12.0", //字体大小
                strokecolor: "255,255,0" //边框色
            });
            layer.addMarker(tm);
            floorLayer.addLayer(layer);
        };
        //添加纯文字标注方法
        document.getElementById("btn9").onclick = function () {
            if(tm){
                tm.name = "ESMap文字标注"
            }
        };

        //添加图片加文字标注方法
        document.getElementById("btn7").onclick = function () {
            removeAll();
            var layer = new esmap.ESLayer('textMarker');
            layer.name = 'mylayer'
            //添加文本标注，默认样式
            var gpos = floorLayer.mapCoord;
            tm2 = new esmap.ESTextMarker({
                x: gpos.x - 25,
                y: gpos.y - 25,
                name: "测试标签2",
                image: "/esmap/image/user.png",
                imageAlign: "bottom",
                imageSize: 60,
                height: 3,
                showLevel: 20,
                // spritify: false,
                // scale: 0.2,
                fillcolor: "255,0,0", //填充色
                fontsize: "12.0", //字体大小
                strokecolor: "255,255,0" //边框色
            });
            layer.addMarker(tm2);
            floorLayer.addLayer(layer);
        };
        //添加图片标注方法
        document.getElementById("btn2").onclick = function () {
            removeAll();
            var layer = new esmap.ESLayer('imageMarker');
            var gpos = floorLayer.mapCoord;
            im = new esmap.ESImageMarker({
                x: gpos.x - 25,
                y: gpos.y - 25,
                url: '/esmap/image/user.png',
                size: 64,
                showLevel: 20,
                height: 3,
                // spritify:false,
                // 或者指定宽高：size:{
                // 	w:32,
                // 	h:64
                // },
                // angle:30,  //如果设置了就是固定marker角度，与地图一起旋转。(size需要重新设置)
                id: 1,
                name: 'myMarker'
            });
            layer.addMarker(im);
            floorLayer.addLayer(layer);
            // im.flash({  //标注闪烁动画
            // 	scale:1.5,
            // 	times:5,
            // 	time:1
            // })
        };
        var angle = 30;
        //添加带角度的图片标注方法
        document.getElementById("btn8").onclick = function () {
            removeAll();
            var layer = new esmap.ESLayer('imageMarker');
            var gpos = floorLayer.mapCoord;
            im3 = new esmap.ESImageMarker({
                x: gpos.x - 25,
                y: gpos.y - 25,
                url: '/esmap/image/user.png',
                size: 20,
                showLevel: 20,
                height: 5,
                angle: angle,
                id: 1,
                name: 'myMarker'
            });
            layer.addMarker(im3);
            floorLayer.addLayer(layer);
            var rotateID = setInterval(function(){
                angle+=2
                im3.angle = angle //直接设置角度旋转
            },50)
            // im3.rotateTo(angle) 带过渡效果的旋转
            // im.flash({  //标注闪烁动画
            // 	scale:1.5,
            // 	times:5,
            // 	time:1
            // })
        };
        //添加定位标注
        document.getElementById("btn3").onclick = function () {
            removeAll();
            var fnum = map.focusFloorNum;
            addLocMarker(center.x, center.y, fnum);
        };

        //更新定位标注
        document.getElementById("btn4").onclick = function () {
            lm.direction = -40; //改变定位标注的方向
            lm.moveTo({
                x: map.center.x + 10,
                y: map.center.y + 10,
                time: 3
            });
        };

        //动态添加标注事件
        document.getElementById("btn5").onclick = function () {
            isDynamicMarker = true;
            isLocator = true;
            removeAll();
        };
        //动态添加标注事件
        document.getElementById("btn10").onclick = function () {
            var locatorX = $("#locatorX").val();
            var locatorY = $("#locatorY").val();
            if (locatorX!=null&&locatorY!=null&&locatorX!=""&&locatorY!=""){
                isDynamicMarker = true;
                isLocator = false;
            }else {
                alert("请先设置基站坐标！");
                return;
            }


        };
        document.getElementById("btn6").onclick = function () {
            removeAll();
        };

        //2维显示
        document.getElementById('btn2D').onclick = function () {
            map.viewMode = esmap.ESViewMode.MODE_2D; //2维模式
        };

        //3维显示
        document.getElementById('btn3D').onclick = function () {
            map.viewMode = esmap.ESViewMode.MODE_3D;; //3维模式
        };
    };

    function bindClick() {
        var fnum = map.focusFloorNum;
        var posInfo = document.querySelectorAll(".panel td");
        if (mapCoord) {
            posInfo[0].innerText = mapCoord.x;
            posInfo[1].innerText = mapCoord.y;
            if (isDynamicMarker)
                show(fnum, mapCoord);
        }
    }
    //添加定位标注方法,x、y为墨卡托坐标, fnum为楼层floornum(第几楼),angle为旋转角度
    function addLocMarker(x, y, fnum) {
        lm = new esmap.ESLocationMarker({
            url: '/esmap/image/pointer.png',
            size: 150,
            height: 30
        });
        map.addLocationMarker(lm);
        lm.setPosition({
            x: x,
            y: y,
            fnum: fnum,
            height: 1
        })
        //locMarker.direction = angle;  //改变定位标注的方向 ，或者使用rotateTo()方法
    }
    function addlineMarker(lineStyle) {
        var center = map.center;
        var fnum = map.focusFloorNum;
        var v1 = {
            x: center.x + 20,
            y: center.y + 20,
            fnum: fnum,
            offset: 10
        }
        var v2 = {
            x: center.x - 10,
            y: center.y - 10,
            fnum: fnum,
            offset: 10
        }
        //箭头导航线
        var points = [v1, v2];
        var linemark = new esmap.ESLineMarker(1, points, lineStyle)
        linemark.datas = {
            case: 'ffff'
        }
        map.drawLineMark(linemark)

    }

    function del() {
        map.clearAllLineMark()
    }

    function submitHandler() {
        var locatorX = $("#locatorX").val();
        var locatorY = $("#locatorY").val();
        var toCoordinateX = $("#toCoordinateX").val();
        var toCoordinateY = $("#toCoordinateY").val();
        var coordinate;
        var toCoordinate;
        var funm;
        if (locatorX!=null&&locatorY!=null&&toCoordinateX!=null&&toCoordinateY!=null){
            coordinate = locatorX+","+locatorY;
            toCoordinate = toCoordinateX+","+toCoordinateY;
            funm = $("#fnumber").val();
        }else {
            coordinate = $("#coordinate").val();
            toCoordinate = $("#toCoordinate").val();
            funm = $("#fnum").val();
        }
        var id = $("#id").val();
        if (locatorX!=""&&locatorY!=""&&toCoordinateX!=""&&toCoordinateY!=""){
            var data = {
                "id":id,
                "coordinate":locatorX+","+locatorY,
                "toCoordinate":toCoordinateX+","+toCoordinateY,
                "fnum":parseInt(funm)
            };
            $.operate.save("/system/locator/edit",data);
        }
    }

</script>
</body>

</html>